<template>
	<div class="whole_wrapper">
		<!-- 头部 -->
		<div class="header">
			<div>
				<img src="http://gudian-lndx.oss-cn-hangzhou.aliyuncs.com/logo/69a3afc43f0d441a924603212d9dddde.png" />
			</div>
			<router-link to="/" class="icon_1" style="color:#000;">
				<div class="index">首页</div>
			</router-link>
			<router-link to="/course" class="icon_1" style="color:#000;">
				<div class="course">课程中心</div>
			</router-link>
		</div>
		<!-- 搜索 -->
		<div class="search">
			<input type="text" class="input_text" v-model="courseName" placeholder="请输入搜索内容">
			<input type="submit" value="搜索" @click="searchCourseName()" class="input_sub">
		</div>
		<!-- 联动 -->
		<div class="linkage">
			<!-- 第一层 -->
			<div class="linkage_wrapper">
				<div class="linkage_first" v-if="firstList">
					<ul v-for="item in firstList">
						<li @click="goSecond(item.id)">{{item.catename}}</li>
					</ul>
				</div>
			</div>
			<!-- 第二层 -->
			<div class="linkage_wrapper">
				<div class="linkage_first" v-if="secondList!=''">
					<ul v-for="item2 in secondList">
						<li @click="goThird(item2.id)">{{item2.catename}}</li>
					</ul>
				</div>
			</div>
			<!-- 第三层 -->
			<div class="linkage_wrapper">
				<div class="linkage_third" v-if="thirdList!=''&&showThird">
					<ul v-for="item3 in thirdList">
						<li @click="goResult(item3.id,item3.catename)">{{item3.catename}}</li>
					</ul>
				</div>
			</div>
		</div>


		<!-- 视频 -->
		<div class="video">
			<div class="video_body">
				<div class="video_body_first" v-for="item in AllVideoList" @click="goVideo(item)">
					<img :src="item.courselogo" />
					<div><span>{{item.coursename}}</span></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'course',
		data() {
			return {
				AllVideoList: [],
				courseName: '',
				firstList: [],
				secondList: [],
				thirdList: [],
				showThird: false,
				firstId: "",
				secondId: "",
				thirdId: ""
			}
		},
		created() {
			this.goFirst()
			this.goResult()
		},
		methods: {
			// 获取第一层
			goFirst(){
				axios({
					method: "get",
					url: "http://119.163.126.25:8083/blade-app/coursecategory/getSeriesList",
				}).then((res) => {
					// console.log(res)
					var firstList = res.data;
					this.firstList = firstList;
				}).catch((err) => {
					console.log(err)
				})
			},
			// 获取第二层
			goSecond(id) {
				// console.log(id)
				var firstId = id;
				this.firstId = firstId;
				this.showThird = false
				axios({
					method: "get",
					url: "http://119.163.126.25:8083/blade-app/coursecategory/getApptypeBySeriesId",
					params: {
						id: id,
					}
				}).then((res) => {
					// console.log(res)
					var secondList = res.data;
					this.secondList = secondList;
				}).catch((err) => {
					console.log(err)
				})
				this.goResult()
			},
			// 获取第三层
			goThird(id) {
				// console.log(id)
				var secondId = id;
				this.secondId = secondId;
				this.showThird = true
				axios({
					method: "get",
					url: " http://119.163.126.25:8083/blade-app/coursecategory/getClassByAppId",
					params: {
						id: id,
					}
				}).then((res) => {
					// console.log(res)
					var thirdList = res.data;
					this.thirdList = thirdList;
				}).catch((err) => {
					console.log(err)
				})
				this.goResult()
			},
			// 最后一层
			goResult(id, name) {
				// console.log(id)
				// console.log(name)
				axios({
					method: "get",
					url: "http://119.163.126.25:8083/blade-app/course/pageBySearch",
					params: {
						current: 1,
						size: 10,
						category1: this.firstId,
						category2: this.secondId,
						category3: id,
						coursename: this.courseName
					}
				}).then((res) => {
					// console.log(res)
					// console.log(res.data.data.records)
					var AllVideoList = res.data.data.records;
					this.AllVideoList = AllVideoList;
				}).catch((err) => {
					console.log(err)
				})
			},
			// 搜索
			searchCourseName() {
				console.log(this.courseName)
				this.goResult()
			},
			// 跳转
			goVideo(item) {
				// console.log(item)
				this.$router.push({
					path: '/video',
					query: {
						video: item
					}
				})
			}
		}
	}
</script>


<style scoped>
	.whole_wrapper {
		/* margin-bottom: 100px; */
		/* padding: 0 200px; */
		background-color: #fff;
	}

	/* 头部 */
	.header {
		height: 150px;
		/* padding: 0px 200px; */
		display: flex;
		align-items: center;
		font-size: 18px;
		padding: 0 200px;
	}

	.index {
		margin-left: 20px;
	}

	.course {
		margin-left: 20px;
	}

	.header img {
		width: 247px;
		height: 52px;
	}


	/* 轮播*/
	.banner {
		width: 100%;
	}

	.banner img {
		width: 100%;
	}

	/* 视频 */
	/* .video {
		width: 100%;
		background: whitesmoke;
		padding-top: 10px;
		height: auto;
		background: whitesmoke;
		padding: 30px 0 10px 0;
		display: block;
	} */

	.video_body {
		/* height: 300px; */
		margin-top: 50px;
		display: flex;
		padding: 0px 200px;
		flex-wrap: wrap; 
		background: whitesmoke;
	}

	.video_body_first {
		width: 285px;
		/* background-color: #fff; */
		border-radius: 6px;
		flex:0 0 19%;
		margin: 5px;
		
	}

	.video_body_first img {
		width: 285px;
		height: 140px;
	}

	.video_body_first div {
		width: 285px;
		height: 90px;
		background-color: #fff;
		padding: 10px 0px;
	}
	.video_body_first div span{
		padding: 10px;
	}
	
	
	/* 
	.video_body_first:not(:first-child) {
		margin-left: 20px;
	} */

	/* 底部 */
	.footer {
		background-color: #333333;
		/* border: 1px solid blue; */
		height: 200px;
		color: #fff;
		padding-top: 60px;
		color: #fff;
	}

	.footer_top {
		width: 1200px;
		margin: 0 auto;
		padding-bottom: 30px;
		border-bottom: 1px solid #666666;
		font-size: 18px;
	}

	.line {
		font-weight: bold;
		font-size: 40px;
	}

	.friend_link {
		width: 1200px;
		margin: 0 auto;
		margin-top: 10px;
		font-size: 14px;
	}

	.friend_link a {
		color: #ccc;
		margin: 0px 10px;
	}

	.copyright {
		background: #666666;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #ccc;
		margin-top: 25px;
	}

	.number {
		line-height: 30px;
		text-align: center;
		color: #ccc;
	}

	.number img {
		width: 16px;
		height: 16px;
		position: relative;
		top: 10px;
	}


	/* 搜索框 */
	.input_text {
		width: 80%;
		height: 40px;
		border: 1px solid green;
		padding: 0px;
		text-indent: 10px;
		outline: none;
		float: left;
	}

	.input_sub {
		width: 100px;
		height: 42px;
		background: green;
		border: 0px;
		float: left;
		color: white;
		cursor: pointer;
	}

	.linkage {
		display: block;
		clear: both;
		font-size: 14px;
		padding-top: 40px;
		padding: 0px 200px;
		height: auto;
	}

	ul {
		/* background: #fff; */
	}

	li {
		float: left;
		border-radius: 6px;
		background: #fff;
		margin: 0px 20px 0px 0px;
		padding: 5px 5px;

		&:nth-child(4n) {
			margin-right: 0px;
		}
	}

	.inkage_first:first-child {
		/* margin-top: 70px; */
	}

	.linkage_wrapper {
		height: auto;
	}

	.linkage_first {
		border-top: 1px solid #d7d7d7;
		padding: 30px 20px;
		background: #fff;
		height: auto;
	}

	.linkage_third {
		border-top: 1px solid #d7d7d7;
		padding: 30px 20px;
		background: #fff;
		height: auto;
		height: 70px;
	}

	/* 搜索 */
	.search {
		padding: 0px 200px;
	}
</style>
